@import '../../../index.scss';

page {
  // background-color: #f8f8f8;
}

.container {
  min-height: 100vh;

  .form {
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 30rpx;

    .title {
      border-bottom: 1rpx solid #ccc;
      font-size: 32rpx;
      padding: 30rpx 0;
      padding-top: 20rpx;
      color: #000;
    }

    .content {
      padding-top: 20rpx;
      width: 100%;
      position: relative;
      padding-bottom: 40rpx;
      margin-bottom: 30rpx;
      font-size: 28rpx;
      background-color: #f8f8f8;
      padding: 20rpx;
      box-sizing: border-box;
      border-radius: 12rpx;

      textarea {
        width: 100%;
        height: 100%;
        font-size: 28rpx;
        height: 300rpx;
        line-height: 1.4;


      }

      .tip {
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        font-size: 24rpx;
        color: #999;
      }
    }

    .atlas {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14rpx;
      padding-bottom: 30rpx;

      .item {
        border-radius: 14rpx;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #f8f8f8;
        position: relative;

        &.last {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #eee;

          image {
            width: 30%;
            height: 30%;
            filter: invert(75%);
          }
        }

        image {
          width: 100%;
          height: 100%;
        }

        .clear {
          width: 44rpx;
          height: 44rpx;
          position: absolute;
          z-index: 1;
          right: 0;
          top: 0;
          opacity: .4;
        }
      }
    }

    .video {
      width: 100%;
      padding-bottom: 30rpx;

      .player {
        margin: 20rpx 0;
        box-sizing: border-box;
        height: 400rpx;
        background-color: #eee;
        border-radius: 14rpx;
        overflow: hidden;

        position: relative;

        video {
          width: 100%;
          height: 100%;
        }

        .clear {
          width: 52rpx;
          height: 52rpx;
          opacity: .4;
          left: 10rpx;
          top: 10rpx;
          position: absolute;
          z-index: 999;
        }

        .upload {
          width: 100%;
          height: 100%;
          // background-color: red;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          image {
            height: 25%;
            filter: invert(75%);
          }

          .tips {
            font-size: 26rpx;
            color: #787878;
            padding-top: 20rpx;
          }
        }
      }
    }
  }

  .type {
    .topics {
      display: flex;
      padding: 0 30rpx;
      box-sizing: border-box;
      flex-wrap: wrap;

      .topic {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: $primary-color;
        border-radius: 100px;
        background-color: rgba($color: $primary-color, $alpha: .1);
        position: relative;
        margin-right: 30rpx;
        padding: 0 16rpx;
        height: 50rpx;
        margin-bottom: 20rpx;

        .icon {
          height: 28rpx;
          margin-right: 4rpx;
          opacity: .7;
        }

        .clear {
          position: absolute;
          width: 34rpx;
          height: 34rpx;
          right: -14rpx;
          top: -12rpx;
          opacity: .4;
          // filter: invert(80%);
        }

      }

      .add {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: $primary-color;
        padding: 0 20rpx;
        height: 50rpx;
        margin-bottom: 20rpx;

        border-radius: 100px;
        border: 1rpx solid $primary-color;

        image {
          height: 24rpx;
          margin-right: 4rpx;
          opacity: .7;
        }
      }
    }

    .list {
      padding: 0rpx 30rpx;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-top: 1px solid #f8f8f8;

        .left {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #333;

          .icon {
            height: 36rpx;
            margin-right: 10rpx;

          }
        }

        .right {
          height: 36rpx;
        }
      }
    }
  }

  .addbtn {
    margin: 30rpx;
    background-color: $primary-color;
    height: 80rpx;

    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;

  }
}